<template>
  <el-select
    ref="select"
    v-model="data"
    filterable
    clearable
    :placeholder="placeholder"
    @clear="clearModelData"
  >
    <el-option
      v-for="item in state.options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      @click="handleOptionClick(item)"
    >
      {{ item.selectLabel }}
    </el-option>
  </el-select>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  defineProps,
  defineEmits,
  nextTick,
  computed,
  watch
} from 'vue'
import request from '@/public/request'
import { ElMessage } from 'element-plus'

// 父组件传递的属性
const props = defineProps({
  modelData: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  //初始化option
  option: {
    type: Array,
    default: () => []
  }
})
// 计算数据生成data
const data = computed({
  get: () => {
    return this.modelData
  },
  set: (value) => {
    this.$emit('update:modelData', value)
  }
})
// 父组件触发条件
const emit = defineEmits(['getOption', 'update:modelData'])

const state = reactive({
  options: props.option
})
defineExpose({})
/**
 * 返回选择的option
 * @param {object} data - 选择的option
 */
const handleOptionClick = (data) => {
  emit('getOption', data)
}
const clearModelData = () => {
  this.data = ''
  emit('update:modelData', '')
}

onMounted(() => {})
</script>

<style lang="scss" scoped></style>
